<template>
  <div class="u-editor-content" style="width: 100%">
    <vue-ueditor-wrap
      v-model="content"
      :config="editorConfig"
      :editor-dependencies="['ueditor.config.js', 'ueditor.all.js','lang/zh-cn/zh-cn.js','xiumi-ue-dialog-v5.js']"
      style="width: 100%"
    />
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { getAccessToken, getTenantId } from '@/utils/auth'
import { getSiteHeader } from '@/utils/cmscommon'

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const props = withDefaults(defineProps<{
  modelValue: string
}>(), {
  modelValue: ''
})

const content = computed({
  get () {
    return props.modelValue || ''
  },

  set (value) {
    emits('update:modelValue', value)
    return value
  }
})
let editorConfig = {
  // 图片限制最大30M
  imageMaxSize: 31457280,
  // 富文本输入框高度
  initialFrameHeight: 500,
  // 富文本输入框宽度
  initialFrameWidth: '100%',
  // 初始化样式 编辑区自定义样式，如果自定义，最好给 p 标签如下的行高，要不输入中文时，会有跳动感
  initialStyle: 'body p{line-height:1.8em; margin: 0 ;} h1,h2,h3,h4,blockquote{margin: 0 ;} body table{margin: 0 ;}',
  autoFloatEnabled: false,
  // 获取上传配置路径
  configUrl:  '/admin/UEditorPlus/config.json',
  // 上传服务路径
  serverUrl: import.meta.env.VITE_UEDITOR_UPLOAD_URL,
  // UEditorPlus 目录
  UEDITOR_HOME_URL: '/admin/UEditorPlus/',
  // 配置请求头token
  serverHeaders: {
   uploadEditor: true,
   Authorization: 'Bearer ' + getAccessToken(),
   'tenant-id': getTenantId(),
   zrcms_site_id: getSiteHeader()
  },
  // 上传图片配置
  imageConfig: {
    // 禁止在线管理
    disableOnline: true,
  },
  toolbars:[[
        "fullscreen",   // 全屏
        "source",       // 源代码
        "|",
        "undo",         // 撤销
        "redo",         // 重做
        "|",
        "bold",         // 加粗
        "italic",       // 斜体
        "underline",    // 下划线
        "strikethrough",// 删除线
        "removeformat", // 清除格式
        "formatmatch",  // 格式刷
        "autotypeset",  // 自动排版
        "pasteplain",   // 纯文本粘贴模式
        "|",
        "forecolor",    // 字体颜色
        "insertorderedlist",   // 有序列表
        "insertunorderedlist", // 无序列表
        "|",
        "rowspacingtop",// 段前距
        "rowspacingbottom",    // 段后距
        "lineheight",          // 行间距
        "|",
        "paragraph",           // 段落格式
        "fontfamily",          // 字体
        "fontsize",            // 字号
        "|",
        "indent",              // 首行缩进
        "justifyleft",         // 居左对齐
        "justifycenter",       // 居中对齐
        "justifyright",
        "justifyjustify",      // 两端对齐
        "|",
        "link",                // 超链接
        "unlink",              // 取消链接
        "anchor",              // 锚点
        "|",
        "imagenone",           // 图片默认
        "imageleft",           // 图片左浮动
        "imageright",          // 图片右浮动
        "imagecenter",         // 图片居中
        "|",
        "simpleupload",        // 单图上传
        "insertimage",         // 多图上传
        "insertvideo",         // 视频
        "attachment",          // 附件
        // "pagebreak",           // 分页
        "formula",             // 公式
        "|",
        "horizontal",          // 分隔线
        "date",                // 日期
        "spechars",            // 特殊字符
        "wordimage",           // Word图片转存
        "|",
        "inserttable",         // 插入表格
        // "deletetable",         // 删除表格
        // "insertparagraphbeforetable",     // 表格前插入行
        // "insertrow",           // 前插入行
        // "deleterow",           // 删除行
        // "insertcol",           // 前插入列
        // "deletecol",           // 删除列
        // "mergecells",          // 合并多个单元格
        // "mergeright",          // 右合并单元格
        // "mergedown",           // 下合并单元格
        // "splittocells",        // 完全拆分单元格
        // "splittorows",         // 拆分成行
        // "splittocols",         // 拆分成列
        // "contentimport",       // 内容导入（支持Word、Markdown）
        "xiumi-connect"   //秀米编辑器
      ]
  ]
}
</script>

<style lang="scss" scoped>
.u-editor-content {
  :deep(.edui-default) {
    .edui-editor {
      border-top: none;
    }
  }

  :deep(.edui-editor-toolbarbox) {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1100;
    border-top: 1px solid #eee;
  }
  :deep(body) {
    margin: 0 !important;
    * {
      margin: 0;
    }
  }
}
</style>
<style lang="scss">
.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {
    background-image: url("/admin/UEditorPlus/xiumi-connect-icon.png") !important;
    background-position: center;
    background-repeat: no-repeat;
}
</style>



